<template>
  <div class="box">
    <van-nav-bar title="标题" />

    <van-tabs v-model:active="active">
      <van-tab title="标签 1">
        <van-search
          v-model="title"
          shape="round"
          background="#4fc08d"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
        <div class="swipe">
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
              <img :src="image.image_src" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";

import { swiperdataApi } from "@/api/api";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
let images = ref([]);

const swiperFun = () => {
  swiperdataApi().then((res) => {
    images.value = res.data.message;
  });
};
swiperFun();

const onSearch = (e) => {
  router.push({ name: "search", params: { key: e } });
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  .swipe {
    width: 100%;
    height: 18rem;
    .van-swipe-item,
    .van-swipe,
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
